<template>
  <div class="tool-bar">
    <!-- 选择工具 -->
    <div class="tool-item"
         :class="{ active: currentTool === 'select' }"
         @click="selectTool('select')">
      <i class="el-icon-aim"></i>
      <span>选择</span>
    </div>
    
    <!-- 画笔工具 -->
    <pen-tool 
      :is-active="currentTool === 'pen'"
      @select="handlePenSelect">
    </pen-tool>
    
    <!-- 其他工具 -->
    <div v-for="tool in otherTools" 
         :key="tool.name"
         class="tool-item"
         :class="{ active: currentTool === tool.name }"
         @click="selectTool(tool.name)">
      <i :class="tool.icon"></i>
      <span>{{ tool.label }}</span>
    </div>
  </div>
</template>

<script>
import PenTool from './PenTool.vue'

export default {
  name: 'ToolBar',
  components: {
    PenTool
  },
  data() {
    return {
      currentTool: 'select',
      otherTools: [
        { name: 'eraser', label: '板擦', icon: 'el-icon-delete' },
        { name: 'focus', label: '聚焦', icon: 'el-icon-view' },
        { name: 'screenshot', label: '截屏', icon: 'el-icon-camera' },
        { name: 'tools', label: '教具', icon: 'el-icon-collection' },
        { name: 'exercise', label: '练习', icon: 'el-icon-notebook-2' },
        { name: 'interaction', label: '互动', icon: 'el-icon-user-solid' },
        { name: 'multiscreen', label: '多屏', icon: 'el-icon-monitor' },
        { name: 'more', label: '更多', icon: 'el-icon-more' }
      ]
    }
  },
  methods: {
    selectTool(toolName) {
      this.currentTool = toolName
      this.$emit('tool-change', { tool: toolName })
    },
    handlePenSelect(penSettings) {
      this.currentTool = 'pen'
      this.$emit('tool-change', penSettings)
    }
  }
}
</script>

<style scoped>
.tool-bar {
  height: 70px;
  background: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 8px;
}

.tool-item:hover {
  background: #f5f7fa;
}

.tool-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.tool-item i {
  font-size: 24px;
}

.tool-item span {
  font-size: 12px;
}
</style> 